<template>
		<view class="adress">新增收货地址</view>
		<view  v-for="(carShop,index) in carShops">
			<view class="car-com-1" v-if="carShop.ischecked" >
				<xdCom :carShop="carShop" ></xdCom>
			</view>
		</view>
		
		<view class="dd">
			<ul style="list-style: none; padding-left: 0;">
				<li>
					<view>商品总额</view>
					<view style="color: red; padding-right: 20rpx;">￥{{prices}}</view>
				</li>
				<li>
					<view>限时补贴</view>
					<view style="padding-right: 20rpx;">-￥{{bt}}</view>
				</li>
				<li>
					<view>优惠卷</view>
					<view v-if="yhj == 0" style="padding-right: 20rpx;" @click="youhui">可选<text style="font-size: 40rpx; color: rgba(0, 0, 0, .5);"> ></text> </view>
					<view v-else style="padding-right: 20rpx;" @click="youhui">￥{{yhj}}<text style="font-size: 40rpx; color: rgba(0, 0, 0, .5);"> ></text> </view>
				</li>
				<li>
					<view>购物卡</view>
					<view style="padding-right: 20rpx;">无可用<text style="font-size: 40rpx; color: rgba(0, 0, 0, .5);"> ></text> </view>
				</li>
				<li>
					<view>运费<text style="color: rgba(0, 0, 0, .5); font-size: 20rpx;">(实付满69包邮)</text></view>
					<view style="padding-right: 20rpx;">￥0 </view>
				</li>
				<li>
					<view>积分抵扣<text style="color: rgba(0, 0, 0, .5); font-size: 20rpx;">共0积分，积分不足，无法抵扣</text></view>
					<view style="padding-right: 20rpx;" >无可用<text style="font-size: 40rpx; color: rgba(0, 0, 0, .5);"> ></text> </view>
				</li>
			</ul>
		</view>
		
		
		
		<view class="invoice" style="display: flex;justify-content: space-between; align-items: center;">
				<view>发票</view>
				<view style="padding-right: 20rpx;">请选择<text style="font-size: 40rpx; color: rgba(0, 0, 0, .5);"> ></text> </view>
		</view>
		
		<view class="zf">
			<checkbox-group style="display: flex; flex-direction: column; justify-content: center;" >
				<checkbox>
					
					<image src="../../static/zf.png"></image>支付宝
				</checkbox>
				<checkbox>
					<image src="../../static/huabaipng.png"></image>花呗分期
				</checkbox>
				<checkbox>
					<image src="../../static/wechat.png"></image>微信支付
				</checkbox>
			</checkbox-group>
		</view>
		
		<view class="add">
			<view class="car-di">
				<view style="margin-left: -80rpx;">合计：<text style="color: red;">￥{{priceses}}</text></view>
				<navigator url="../xaidan/xaidan"><view class="btn2">去结算</view></navigator>
			</view>
		</view>
		
		
		
</template>

<script>
	let that = null;
	export default {
		data() {
			return {
				carShops : [],
				prices:0,
				bt:0,
				priceses:0,
				yhjs:[10,200,1000,"隐藏款"],
				yhj:0
			}
		},
		onShow() {
			this.carShops = getApp().globalData.carshopss
			for(let i  in this.carShops){
				let j = this.carShops[i];
				if(j.ischecked){
					this.prices = this.prices + j.price*j.conunt
				}
			}
			this.priceses = this.prices - this.bt
		},
		methods: {
			youhui(){
				that  = this;
				uni.showActionSheet({
					itemList:this.yhjs,
					success(res) {
						that.yhj = that.yhjs[res.tapIndex]
						if(that.yhj === "隐藏款"){
							that.priceses = 0
							uni.showToast({
								title:"恭喜你获得美式零元购机会"
							})
						}else{
							that.priceses = that.prices - that.bt - that.yhj
						}
					}
				})
				this.yhj = that.yhj;
				
				this.priceses = that.priceses
			}
		}
	}
</script>

<style>
	body {
		background-color: #f8f8f8;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.adress{
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 700rpx;
		height: 100rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.car-com-1 {
		margin-top: 20rpx;
		padding-left: 30rpx;
		width: 670rpx;
		height: 250rpx;
		border-radius: 7%;
		background-color: white;
	}
	.dd{
		margin-top: 20rpx;
		padding-left: 30rpx;
		width: 670rpx;
		height: 550rpx;
		border-radius: 7%;
		background-color: white;
	}
	
	li{
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.invoice{
		margin-top: 20rpx;
		padding-left: 30rpx;
		width: 670rpx;
		height: 150rpx;
		border-radius: 7%;
		background-color: white;
	}
	.add {
		width: 100%;
		height: 120rpx;
		background-color: white;
		position: fixed;
		bottom:var(--window-bottom,0);
		z-index: 100;
		margin-left: -23rpx;
	}
	.car-di {
		display: flex;
		justify-content: space-around;
		padding-top: 30rpx;
	}
	.btn2 {
		margin-top: -10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 70rpx;
		background-color: red;
		color: white;
		border-radius: 100rpx;
	}
	.zf{
		margin-top: 20rpx;
		padding-left: 30rpx;
		width: 670rpx;
		height: 300rpx;
		border-radius: 7%;
		background-color: white;
	}
	.zf image{
		width: 100rpx;
		height: 100rpx;
	}
	
	
</style>
